<%@page pageEncoding="utf-8" %>
<script type="text/javascript">
	$('#banner-tt').datagrid({ 
		pagination:true,
		remoteSort:false, 
		nowrap:false, 
		fitColumns:true, 
		url:'${pageContext.request.contextPath}/banner/queryBanner',
		toolbar:[{	
					text:'添加轮播图',
					iconCls: 'icon-add',
					handler: function(){
						$("#addBanner").dialog({    
							    title: '添加轮播图',    
							    width: 400,    
							    height:400,    
							    closed: false,    
							    cache: false,    
							    href: '${pageContext.request.contextPath}/banner/addBanner.jsp',    
							    modal: true   
							}); 
					}
				},'-',{
					text:'删除选中轮播图',
					iconCls: 'icon-edit',
					handler: function(){
						$.messager.confirm(
							"系统提示？",
	  						"确认删除吗？",
	  						function(fn){
								var ret=$("#banner-tt").datagrid("getSelections")
								var ids = new Array();
								for(var i=0;i<ret.length;i++){
									ids[i]=ret[i].id;
								}
	  							$.post(
	  								"${pageContext.request.contextPath}/banner/deleteBanners",
	  								"ids="+ids,
	  								function(){
	  									$("#banner-tt").datagrid("reload")
	  								}
	  							);
	  						}
						);
					}
			},'-',{
					text:'删除轮播图',
					iconCls: 'icon-remove',
					handler: function(){
					var id=$("#banner-tt").datagrid("getSelected").id;
						$.messager.confirm(
	  						"系统提示？",
	  						"确认删除吗？",
	  						function(fn){
	  							$.post(
	  								"${pageContext.request.contextPath}/banner/deleteBanner",
	  								"id="+id,
	  								function(){
	  									$("#banner-tt").datagrid("reload")
	  								}
	  							);
	  						}
  						)
					}
			}],
		columns:[[
				{field:'select',id:'sel',checkbox:true,width:1,align:'center'},
				{field:'id',title:'ID',width:1,align:'center'}, 
				{field:'title',title:'名称',width:1,sortable:true,align:'center'}, 
				{field:'img_path',title:'图片路径',width:1,align:'center',sortable:true}, 
				{field:'status',title:'状态',sortable:true,align:'center',
				formatter:function(value,row,index){
								if (value==1){
									return '<input id ="'+row.id+'" class="switchbutton" checked style="width:100px;height:30px">';
								} else {
									return '<input id ="'+row.id+'" class="switchbutton" style="width:100px;height:30px">';
								}
							}
						}, 
				{field:'pub_date',title:'创建时间',width:1,sortable:true,align:'center'}, 
				{field:'description',title:'描述',width:1,align:'center'} 
			]], 
		view: detailview, 
		onLoadSuccess:function(data){
			$(".switchbutton").switchbutton({ 
					onText:"上线",
					offText:"下线",
			        onChange: function(checked){
			       // console.log(checked)
			        	var id=$(this).prop("id");
			        	//console.log(id)
			        	var status = 0;
			        	if(checked)
			        	status = 1;
			        	var s=status==1?'状态: 在线':'状态: 离线';
						$.post(
								"${pageContext.request.contextPath}/banner/updateStatus",
								{"status":status,"id":id},
								function(){
									$('#p'+id).text(s)
								}
							);	
			      } 
			 });
		},
		detailFormatter:function(rowIndex, rowData){ 
		//console.log(rowData)
		var status=rowData.status==1?'在线':'离线';
		return '<table><tr>' + 
		'<td rowspan=2 style="border:0"><img src="image/' + rowData.img_path + '" style="height:50px;"></td>' + 
		'<td style="border:0">' + 
		'<p>名称: ' + rowData.title + '</p>' + 
		'<p id="p'+rowData.id+'">状态: ' + status + '</p>' + 
		'</td>' + 
		'</tr></table>'; 
		} 
	});
	
</script>
<div id="addBanner"></div>
<table id="banner-tt"></table> 